<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script>
    <script src='http://cdn.staticfile.org/jquery/3.3.1/jquery.min.js'></script>

</head>
<body>



<script>

    function printLog(logs) {

        logs = JSON.parse(logs)

        if ('object' != typeof(logs)) {
            return;
        }
        logs.forEach(function (log) {
            if (console[log.type]) {
                if (log.css) {
                    console[log.type]('%c' + log.msg, log.css);
                }
                else {
                    console[log.type](log.msg);
                }
                return;
            }

            if ('alert' == log.type) {
                alert(log.msg);
            }
            else {
                alert('SocketLog type error, ' + log.type);
            }
        });
    }

    $(document).ready(function () {
        // 连接服务端
        var socket = io('http://127.0.0.1:2120');
        // 连接后登录
        socket.on('connect', function () {
            console.log("连接成功")
            socket.emit('login', "hahahaha");
        });
        // 后端推送来消息时
        socket.on('new_msg', function (msg) {
            printLog(msg)
        });

    });
</script>

</body>
</html>